<template>
  <div>
    <X_Left />
    <X_Right />
    <X_Bottom />
  </div>
</template>

<script setup>
import { getAssetsFile } from "@/utils/compnt.js";
import X_Right from "./X_Right/index.vue";
import X_Left from "./X_Left/index.vue";
import X_Bottom from "./X_Bottom/index.vue";
import { ref, onMounted } from "vue";

// 定义响应式数据
const imgdata = ref([
  {
    src: "sz",
    hover: "hover/szhover",
    btn: "btn/szbtn",
  },
  {
    src: "dw",
    hover: "hover/dwhover",
    btn: "btn/dwbtn",
  },
  {
    src: "fd",
    hover: "hover/fdhover",
    btn: "btn/fdbtn",
  },
  {
    src: "sx",
    hover: "hover/sxhover",
    btn: "btn/sxbtn",
  },
  {
    src: "cz",
    hover: "hover/czhover",
    btn: "btn/czbtn",
  },
  {
    src: "diw",
    hover: "hover/diwhover",
    btn: "btn/diwbtn",
  },
  {
    src: "sez",
    hover: "hover/sezhover",
    btn: "btn/sezbtn",
  },
  {
    src: "diwd",
    hover: "hover/diwdhover",
    btn: "btn/diwdbtn",
  },
]);
const hoverIndex = ref(-1);
const activeIndex = ref(-1);
const rightbtn = ref("图层控制");
const props = ref({
  children: "children",
  label: "label",
});
const treedata = ref([
  {
    label: "Level one 1",
    children: [
      {
        label: "Level two 1-1",
        children: [
          {
            label: "Level three 1-1-1",
          },
        ],
      },
      {
        label: "Level two 1-1",
        children: [
          {
            label: "Level three 1-1-1",
          },
        ],
      },
      {
        label: "Level two 1-1",
        children: [
          {
            label: "Level three 1-1-1",
          },
        ],
      },
    ],
  },
]);
const btomindex = ref(0);
const rightbtnindex = ref(null);
const dialogVisible = ref(false);
const ceshi = ref([
  {
    name: "水面",
    ischek: false,
  },
  {
    name: "陆地",
    ischek: false,
  },
  {
    name: "空中",
    ischek: false,
  },
  {
    name: "设施",
    ischek: false,
  },
  {
    name: "空间",
    ischek: false,
  },
  {
    name: "敌",
    ischek: false,
  },
  {
    name: "我",
    ischek: false,
  },
  {
    name: "友",
    ischek: false,
  },
  {
    name: "中立",
    ischek: false,
  },
  {
    name: "不明",
    ischek: false,
  },
]);
const checkout = ref([]);
const ceshiinput = ref("");
const tableData = ref([]);
const form = ref({
  name: "",
});

// mounted 钩子
onMounted(() => {
  // 原 mounted 钩子中的逻辑，这里为空，可按需添加
});
// 定义方法
const activateImage = (index) => {
  activeIndex.value = activeIndex.value === index ? -1 : index;
};

const getImageSource = (item, index) => {
  if (index === activeIndex.value) {
    return getAssetsFile(item.btn || item.hover || item.src);
  }
  return hoverIndex.value === index
    ? getAssetsFile(item.hover || item.src)
    : getAssetsFile(item.src);
};

const leftbtn = (item, index) => {
  btomindex.value = index;
  switch (item) {
    case "手工标绘":
      dialogVisible.value = !dialogVisible.value;
      break;
  }
};

const beforeCloseed = (data) => {
  if (data === "关闭") {
    dialogVisible.value = false;
  } else {
    console.log("suoxiao ");
    dialogVisible.value = false;
  }
};

const clicheckout = (data) => {
  data.ischek = !data.ischek;

  if (data.ischek) {
    if (!checkout.value.some((item) => item.name === data.name)) {
      checkout.value.push(data);
    }
  } else {
    checkout.value = checkout.value.filter((item) => item.name !== data.name);
  }

  ceshi.value.forEach((item) => {
    if (item.name === data.name) {
      item.ischek = data.ischek;
    }
  });
};
</script>

<style scoped></style>

<style>
.el-tree-node:focus>.el-tree-node__content {
  background-color: unset !important;
  color: #a8d6ff;
}

.custom-dropdown .el-select-dropdown__item {
  background: #002245 !important;
}

.custom-dropdown .el-select-dropdown__item.selected {
  background: rgba(0, 137, 255, 0.2) !important;
}
</style>